<template>
    <div>
        <div class="table_wrap">
            <div class="breadcrumb_nav">
                <BreadCrumb></BreadCrumb>
            </div>
            <div class="allstuInfoAll_tittle">
                不带头像的所有学生信息查询
            </div>
            <el-button type="info" @click="exportExcel">点击导出Excel表格</el-button>
            <div class="table_all_head">
                <el-table id="work-table" :data="result" style="width: 100%" height="600">>
                    <el-table-column prop="stu_id" label="学号">
                    </el-table-column>
                    <el-table-column prop="stu_name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="stu_sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="stu_jg" label="籍贯" width="200px">
                    </el-table-column>
                    <el-table-column prop="stu_date" label="出生日期">
                        <template slot-scope="scope">
                            <!-- <p></p> -->
                            <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stu_hobby" label="爱好" width="200px">
                    </el-table-column>
                    <el-table-column prop="stu_gbf" label="男或女朋友">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { req_all_info_notHeader } from '@/api/stuInfo.js';
//引入包 导出excel
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
    data() {
        return {
            result: []
        }
    },
    async mounted() {
        let result = await req_all_info_notHeader();
        this.result = result.data
    },
    methods:{
        //导出excel表格
        exportExcel(){
            /**
             *  用到两个包 
             * npm i -S xlsx@^0.16.0 
             * npm i -S file-saver@^2.0.2
             */

             //将table生成工作簿对象  参数一：table对象； 参数二：配置对象
             let wb = XLSX.utils.table_to_book(document.getElementById('work-table'),{
                raw:true,
             });

             //根据工作簿当中的内容将其变为二进制 输出
             let wbout = XLSX.write(wb,{
                bookType:"xlsx",
                bookSST:true,
                type:"array"
            });

            //将得到的二进制文件存储到Blob
            try{
                FileSaver.saveAs(
                    new Blob([wbout],{type:'application/octet-stream'}),
                    "stuInfo.xlsx"
                )
            }catch(e){
                console.log(e)
            }

        }
    }
}
</script>

<style lang="scss" scoped>
div {

    .table_wrap {
        .breadcrumb_nav {
            height: 30px;
        }

        .allstuInfoAll_tittle {
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            height: 30px;
        }

        .table_all_head {
            margin: 10px 0;
        }
    }
}
</style>